<script setup lang="ts">
import FullPage from "@/components/Layout/FullPage";
import { computed, ref } from "vue";
import debounce from "@/utils/debounce";
import { interpreter } from "@/api/request";
import { advice } from "@/api/user";

const list = ref<Array<{ question: string; desc: string; isSelect: boolean }>>([
  {
    question: "功能异常",
    desc: "页面闪退、卡顿、无响应等",
    isSelect: true
  },
  {
    question: "软件使用",
    desc: "查找站点、预约等",
    isSelect: false
  },
  {
    question: "性能问题",
    desc: "响应慢、回复不准确",
    isSelect: false
  },
  {
    question: "其他问题",
    desc: "产品优化建议",
    isSelect: false
  }
]);
const issueValue = ref("");

const btnDisabled = computed(() => {
  return issueValue.value === "";
});
const handleConfirm = debounce(async () => {
  const active = list.value.find(item => item.isSelect);
  if (active) {
    const [err] = await interpreter(advice(active.question, active.desc));
    if (!err) {
      uni.showToast({
        title: "提交成功",
        icon: "none"
      });
      issueValue.value = "";
    }
  }
});
const onSelectItem = (index: number) => {
  list.value.map((item, i) => {
    if (i === index) {
      item.isSelect = true;
    } else {
      item.isSelect = false;
    }
  });
};
</script>

<template>
  <FullPage>
    <view class="title">问题描述</view>
    <Flex class="question" justify="space-between">
      <view
        :class="['item', { select: item.isSelect }]"
        v-for="(item, index) in list"
        :key="index"
        @click="onSelectItem(index)"
      >
        <view class="question-title">{{ item.question }}</view>
        <view class="question-desc">{{ item.desc }}</view>
      </view>
    </Flex>
    <view class="title">请具体描述</view>
    <uv-textarea
      class="textarea"
      v-model="issueValue"
      height="100"
      :cursor-spacing="160"
      :maxlength="500"
      adjustPosition
      :placeholder="`请输入您的问题`"
      :textStyle="{ color: '#000' }"
      border="none"
      confirmType="send"
      :customStyle="{
        borderRadius: '20px',
        marginBottom: '24px'
      }"
    />
    <t-button
      width="100%"
      :type="btnDisabled ? '' : 'deep'"
      :backgroundColor="'var(--btn-bg-color-disabled)'"
      :disabled="btnDisabled"
      labelColor="#fff"
      @click="handleConfirm"
    >
      提交反馈
    </t-button>
  </FullPage>
</template>

<style lang="scss" scoped>
.textarea {
  background-color: #f3f4f6;
  margin-top: 10px;
}
.title {
  color: #19191c;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.question {
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.item {
  flex-basis: 49%;
  flex-shrink: 1;
  background-color: #f3f4f6;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 8px;
  box-sizing: border-box;
  padding: 16px 0;
  position: relative;
  .question-title {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .question-desc {
    font-size: 12px;
    color: #6c6d7b;
  }
  &.select {
    .question-title,
    .question-desc {
      color: #4059fd;
    }
    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/label_check.svg");
    }
  }
}
</style>
